<template>
	<view>
		<view class="content">
			
			<!-- 模块一 -->
			<view class="content_module">		
				<!-- 用户信息栏 -->
				<view class="userinfo">
					<!-- 头像 -->
					<image :src="convertHttp(avatar)" class="avatar" @click="updateAvatar"></image>
					<!-- 用户名和等级 -->
					<view class="info_detail">
						<view class="username">{{username}}</view>
						<view class="level" :style="{'background-color' : getLevel(counter) === 1 ? '#4DC98D' : getLevel(counter) === 2 ? '#FF6666' : getLevel(counter) === 3 ? '#0099CC' : '#F9D223'}">
							<image src="@/static/setting/index/level.png"></image>
							<text class="level_text">Lv.{{getLevel(counter)}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 模块二 -->
			<view class="content_module" v-if="!valTypeOf(isChecked, 'string')">		
				<!-- 签到栏 -->
				<view class="check_in" :class="{checked: isChecked}">
					<view class="signin_image">
						<image src="@/static/setting/index/check_in.png"></image>
						<text>已累计签到{{counter}}天</text>
					</view>
					<view class="check_in_btn" @click="checkInClick">{{isChecked ? '已签到' : '点击签到'}}</view>
				</view>
				
			</view>
		
			<!-- 模块三 -->
			<view class="content_module content_module_normal">	
			
				<!-- 新手指南 -->
				<view class="normal_item" @click="$navigateTo({
					url: '/pages/setting/instruction/index'
				})">
					<image src="@/static/setting/index/description.png"></image>
					<text>新手指南</text>
				</view>
						
				<!-- 关于 -->
				<view class="normal_item" @click="$navigateTo({
					url: '/pages/setting/about/index'
				})">
					<image src="@/static/setting/index/about.png"></image>
					<text>关于</text>
				</view>
				
			</view>
			
			<!-- 模块四 -->
			<view class="content_module content_module_normal">	
				<!-- 修改密码 -->
				<view class="normal_item" @click="$navigateTo({
					url: '/pages/setting/modify_pwd/index'
				})">
					<image src="@/static/setting/index/pwd.png"></image>
					<text>修改密码</text>
				</view>
				<!-- 退出登录 -->
				<view class="normal_item" @click="logOutClick">
					<image src="@/static/setting/index/logout.png"></image>
					<text>退出登录</text>
				</view>
			</view>
		
			
		</view>
	</view>
</template>

<script>
	import convertHttp from '@/utils/convertHttp.js'
	import { levelSection } from '@/global/js/level.js'
	import { isCheckedToday, getNowDateStrFull } from '@/utils/planDateHandle.js'
	
	export default {
		data() {
			return {
				isChecked: '',
				counter: 0,
				levelSection,
				username: '游客试用',
				avatar: '',
				checkedAt: '',
			};
		},
		onShow() {
			this.getUserDetail()
		},
		methods: {
			convertHttp,
			// 修改头像
			updateAvatar() {
				this.$getImgFile(10, 1)
				.then(result => { 
					console.log(result)
					
					return this.$http_file({
						url: "/api/localStorage/upload",
						method: "post",
						data: {
							file: result[0],
							// name: '1'
						}
					})
				}).then( res => {
					console.log(res)
					
					return this.$http_json({
						url: "/api/user/update",
						method: "post",
						data: {
							userId: this.$getMemoryPmt('userInfo').id,
							avatar: res.data.filePath
						}
					})
				}).then(res => {
					console.log(res)
					this.$showToast({
						icon: "success",
						title: "修改成功"
					})
					this.getUserDetail()
				})
			},
			// 检查变量类型
			valTypeOf(val, type) {
				if(typeof(val) === type) {
					return true
				}else {
					return false
				}
			},
			// 检查今天是否签过到
			isCheckedToday,
			getNowDateStrFull,
			// 获取用户详情
			getUserDetail() {
				return this.$http_json({
					url: "/api/user/detail",
					method: "get",
					loading: false,
					params: {
						userId: this.$getMemoryPmt('userInfo').id
					}
				}).then(result => {
					console.log(result)
					
					this.checkedAt = result.data.checkedAt
					this.counter = result.data.counter
					this.username = result.data.username
					this.avatar = result.data.avatar
					
					this.isChecked = this.isCheckedToday(this.checkedAt.split(" ")[0])
				})
			},
			// 计算用户等级
			getLevel(counter) {
				
				if(counter >= this.levelSection[0] && counter < this.levelSection[1]) {
					return 1
				} 
				else if(counter >= this.levelSection[1] && counter < this.levelSection[2]) {
					return 2
				} 
				else if(counter >= this.levelSection[2] && counter < this.levelSection[3]) {
					return 3
				}
				else {
					return 4
				}
			},
			// 退出登录点击
			logOutClick() {
				uni.showModal({
				    title: '系统提示',
				    content: '是否退出登录？',
				    success: res => {
				        if (res.confirm) {
							
							this.$clearMemoryPmt()
							uni.showToast({
							    title: '退出成功',
							});
							
							setTimeout(() => {
								uni.reLaunch({
								    url: '/pages/account/login/index'
								});
							}, 1000)
				        }
				    }
				});
			},
			// 签到按钮点击
			checkInClick() {
				// 防止重复点击
				if(this.isChecked) {
					uni.showToast({
						icon: 'none',
					    title: '已签到，请勿重复点击',
					});
					return
				}
				
				// 请求签到接口
				this.$http_json({
					url: "/api/user/checked",
					method: "post",
					data: {
						userId: this.$getMemoryPmt('userInfo').id,
						counter: ++this.counter,
						checkedAt: this.getNowDateStrFull()
					}
				}).then(result => {
					console.log(result)
					
					// 重新 请求账户详情接口
					return this.getUserDetail()
				}).then(() => {
					uni.showToast({
					    title: '签到成功',
					});
				})
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	
	.content {
		padding-left: 30rpx;
		
		.content_module {
			border-bottom: 2rpx solid #F0F0F0;
			padding: 26rpx 30rpx 26rpx 0;
			
			.userinfo {
				display: flex;
				align-items: flex-start;
				padding: 20rpx 0;
				
				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				
				.info_detail {
					
					margin-left: 34rpx;
					
					.username {
						font-size: 36rpx;
						font-weight: bold;	
					}
					
					.level {
						display: flex;
						align-items: center;
						justify-content: center;
						
						margin-top: 20rpx;
						// background-color: #4DC98D;
						height: 36rpx;
						border-radius: 17rpx;
						width: 116rpx;
						
						image {
							width: 30rpx;
							height: 30rpx;
						}
						
						.level_text {
							margin-left: 10rpx;
							color: #FFFFFF;
							font-size: 24rpx;
							
						}
					}
					
				}
			
			}
		
			.check_in {
				background-color: #FB8142;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 20rpx;
				border-radius: 10rpx;
				
				.signin_image {
					display: flex;
					align-items: center;
					color: #FFFFFF;
					font-size: 26rpx;
					
					image {
						width: 34rpx;
						height: 34rpx;
						margin-right: 20rpx;
					}
					
				}
				
				.check_in_btn {
					background-color: #FFFFFF;
					color: #FB8142;
					font-size: 26rpx;
					padding: 4rpx 14rpx;
					border-radius: 10rpx;
				}
			}
			
			.checked {
				background-color: #29CD96;
				.check_in_btn {
					color: #29CD96;
				}
			}
		
			.normal_item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				padding: 30rpx 0;
				
				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 28rpx;
				}
			}
		}
		
		.content_module_normal {
			padding: 16rpx 30rpx 16rpx 0;
		}
	}
</style>
